<template>
	<view class="main">
		<view class="title-box">
			<view class="">
				<alltitleVue :title="title" :url="url" />
			</view>
			<view class="search">
				<image src="../../static/home/seach.png" mode=""></image>

				<input v-model="keyword" type="text" class="search-input" @keyup.enter="searchData" @input="searchData"
					placeholder="根据姓名、科室找医生" />
				<view class="icon-del" @click="del" v-if='keyword!=""'>
					<u-icon size="34" name="plus-circle"></u-icon>
				</view>

				<view class="vertical">
				</view>
				<view @tap="searchData" class="search-btn">
					搜索
				</view>
			</view>
			<view class="tabs-box">
				<view class="" v-for="(item,index) in list" :key="index" @click="change(index)"
					:class="{'tabs-border':current==index}">
					{{item.name}}
				</view>
				<!-- <u-tabs  bar-width='100' inactive-color="#808080" active-color="#CCA566" offset =[5,20]  :list="list" :is-scroll="false"
					:current="current" @change="change"></u-tabs> -->
			</view>
		</view>
		<view class="pull" v-if="current==1">
			<pullDown @inquire="inquire" @select="select" @offices="offices" @reset="reset" :isheigth="isheigth" :levelList="levelList"
				:office="office" :sort="medicSynthesis" />
		</view>
		<view class="pull" v-if="current==3">
			<pullDown @inquire="inquire" :isTrue="isTrue" :isproduct="isproduct" :isheigth="isheigth"
				:sort="medicSynthesis" :screen="screens" />
		</view>
		<view class="synthesis">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
				:class="{'scroll-height':current==1||current==3,}" @scrolltoupper="upper" @scrolltolower="lower">
				<!-- 综合标签 -->
				<view class="synthesis-box" v-if="current==0 ">
					<view class="office-height">

					</view>
					<view class="box" v-if="doctor.length>0">
						<view class="box-title title-bot">
							相关医生
						</view>
						<view class="">
							<view class="doctorCard" v-if="doctor.length>0">
								<view class="card-item" v-for="(item,index) in doctor.slice(0,2)" :key="item,id"
									@click="department(item)">
									<doctorCard :card="item" :levelList="levelList" />
								</view>
							</view>
							<view class="box-empty" v-else>
								<u-empty text="未找到相关医生" mode="list"></u-empty>
							</view>
						</view>
						<view class="more" v-if="doctor.length>=1" @click="change(1)">
							更多医生<image class="right-img" :src="right" mode=""></image>
						</view>
					</view>
					<view class="box" v-if="sort.length>0">
						<view class="box-title">
							相关科室
						</view>
						<view class="">
							<view class="office" v-if="sort.length>0">
								<view class="office-item" v-for="(item,index) in sort" :key="index">
									<view class="office-bg" :style="{ 'background-image': `url(${bg})` }"
										@click="officeClick(item)">
										<image :src="item.photoUrl" mode=""></image>
										<view class="">
											{{item.title}}
										</view>
									</view>
								</view>
							</view>

							<view class="box-empty" v-else>
								<u-empty text="未找到相关科室" mode="list"></u-empty>
							</view>
						</view>
					</view>
					<view class="box" v-if="product.length>0">
						<view class="box-title">
							相关产品
						</view>
						<view class="product product-top">
							<view class="" v-if="product.length>0">
								<view class="product-item" v-for="(item,index) in product" :key="index"
									@click="productClick(item)">
									<product :product="item" />
								</view>
							</view>
							<view class="box-empty" v-else>
								<u-empty text="未找到相关药品" mode="list"></u-empty>
							</view>
						</view>
					</view>
				</view>
				<!-- 医生标签 -->
				<view class="medic-box medic-boxs" v-if="current==1">

					<view class="">
						<view class="doctorCard" v-if="doctor.length>0">
							<view class="card-item" v-for="(item,index) in doctor" :key="item,id"
								@click="department(item)">
								<doctorCard :card="item" :levelList="levelList" />
							</view>
						</view>
						<view class="doctor-empty empty" v-else>
							<u-empty text="未找到相关医生" mode="list"></u-empty>
						</view>
					</view>
				</view>
				<!-- 科室标签 -->
				<view class="" v-if="current==2">
					<view class="office-height">

					</view>
					<view class="office-box" v-if="sort.length>0">
						<view class="office-item" v-for="(item,index) in sort" :key="index">
							<view class="office-bg" :style="{ 'background-image': `url(${bg})` }"
								@click="officeClick(item)">
								<image :src="item.photoUrl" mode=""></image>
								<view class="">
									{{item.title}}
								</view>
							</view>
						</view>
					</view>
					<view class="sort-empty empty" v-else>
						<u-empty text="未找到相关科室" mode="list"></u-empty>
					</view>
				</view>
				<!-- 产品标签 -->
				<view class="medic-box" v-if="current==3">

					<view class="">
						<view class="doctorCard" v-if="product.length>0">
							<view class="" v-for="(item,index) in product" :key="item,id" @click="productClick(item)">
								<product :product="item" />
							</view>
						</view>
						<view class="product-empty empty" v-else>
							<u-empty text="未找到相关产品" mode="list"></u-empty>
						</view>
					</view>
				</view>


			</scroll-view>
		</view>


	</view>
</template>

<script>
	import {
		getregistration,
		doctorList,
		listDep,
		getSearch
	} from '../../service/api.js'
	import config from '../../utils/config';
	import pullDown from '../../components/pullDown.vue';
	import doctorCard from '../../components/doctorCard.vue';
	import product from '../../components/product.vue';
	export default {
		components: {
			doctorCard,
			pullDown,
			product
		},
		data() {
			return {
				//医生等级
				levelList: [],
				screens: [],
				url: "searchResults/index",
				isTrue: true,
				isheigth: true,
				bg: config.ossHost + '2024/12/29/b17ef8ce519842209aaf9fb9ce509d1a.png',
				right: config.ossHost + '2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png',
				medicSynthesis: [{
						label: '综合排序',
						value: 2,
					},
					{
						label: '价高优先',
						value: "asc",
					},
					{
						label: '价低优先',
						value: "dsc",
					}
				],
				isproduct: false,
				synthesis: [{
						label: '综合排序',
						value: "",
					},
					{
						label: '热门医生',
						value: 1,
					},
					{
						label: '好评率',
						value: 2,
					},
					{
						label: '价高优先',
						value: 3,
					},
					{
						label: '价低优先',
						value: 4,
					}
				],
				doctor: [],
				office: [],
				title: "搜索",
				keyword: "",
				list: [{
						name: '综合'
					}, {
						name: '医生'
					}, {
						name: '科室',
					},
					{
						name: '产品',
					}
				],
				params: {
					depId: "",
					name: "",
					level: "",
					orderPrice: ""
				},
				current: 0,

				sort: [{
						id: 1,
						intro: "<p>1111</p>",
						mobile: "1111",
						parentId: 0,
						photoUrl: "1846822197126328322",
						shows: "0",
						sorts: "0",
						title: "内科",
					},
					{
						id: 1,

					},


				],
				product: []
			}
		},
		onLoad(option) {
			if (option.name) {
				this.keyword = option.name;
				this.current = option.current;
				this.searchData();
			}

			this.getlevel();
			this.getlistDep();

		},
		methods: {
			offices(item) {
				this.params.depId = item.id;
				this.getdepDoctor()
			},
			async getdepDoctor() {
				
				let res = await doctorList(this.params)
				if (res.code == 200) {
					// this.title = JSON.parse(getStore('office')).title;
					this.doctor = res.rows;
				}
			},
			// /*获取搜素列表*/
			searchData() {
				if (this.keyword == "") {
					return
				}
				try {
					return new Promise(async (ok, no) => {
						let params = {
							name: this.keyword,
						};
						let res = await getSearch(params);
						console.log(res, "这里是什么接口")
						if (res.code == 200) {
							this.doctor = res.data.doctors;
							this.product = res.data.goods;
							this.sort = res.data.deps;
							ok(res);
						}
					});
				} catch (error) {
					toast(error);
				}
			},



			//医生价格排序

			select(item) {
				if (item.value == "dsc") {
					this.doctor = this.doctor.sort((a, b) => a.price - b.price);
				} else {
					this.doctor = this.doctor.sort((a, b) => b.price - a.price);
				}
			},
			//请求医生等级
			async getlevel() {
				let res = await getregistration("doctor_level")
				if (res.code == 200) {
					console.log(res, "888888")
					this.levelList = res.rows;
				}
			},
			//获取科室
			async getlistDep() {
				let res = await listDep(this.params);
				if (res.code == 200) {
					this.office = res.rows
				}


			},
			del() {
				this.keyword = "";
			},
			change(index) {
				this.current = index;
			},
			//下拉子组件方法
			inquire(item) {
				
				this.params.level = item;
				
				this.getdepDoctor()
				
				
				


			},
			reset(item){
				this.params.level=item;
				this.getdepDoctor()
			},
			//跳转医生详情
			department(item) {
				console.log(item, this.levelList)
				item.dictLabel = this.levelList[item.level].dictLabel
				uni.navigateTo({
					url: `/integration/doctorDetails/index?item=${JSON.stringify(item)}`
				})
			},
			//跳转产品详情
			productClick(item) {
				uni.navigateTo({
					url: `/integration/productList/index?id=${item.id}`
				})
			},
			//跳转科室页面
			officeClick(item) {

				uni.navigateTo({
					url: `/integration/doctorsList/index?itemid=${item.id}&itemtitle=${item.title}`
				})
			},
			upper() {},
			//下翻
			lower() {
				switch (this.current) {
					case 1:

						break;
					case 2:

						break;
					case 3:

						break;
					default:

						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		color: #1A1A1A;
		background: #F5F3F0;

		.title-box {
			height: 350rpx;
			background: #fff;
		}

		//搜索
		.search {
			width: 654rpx;
			padding: 0 24rpx;
			height: 64rpx;
			background: #F5F3F0;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-left: 24rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.icon-del {
				transform: rotate(45deg);
			}

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			input {
				font-size: 24rpx;
				width: 525rpx;
			}

			.vertical {
				height: 25rpx;
				border-left: 1rpx solid;
				margin: 0 20rpx;

			}

			.search-btn {
				font-size: 24rpx;
				color: #4D4D4D;
				width: 72rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #fff;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}

		//选项卡
		.tabs-box {
			width: 530rpx;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			margin-left: 24rpx;
			margin-top: 22rpx;
			justify-content: space-between;

			view {
				text-align: center;
				box-sizing: border-box;
				width: 100rpx;
				margin-right: 24rpx;

			}

			.tabs-border {
				border-bottom: 4rpx solid #CCA566;
				color: #CCA566;
			}
		}

		.medic-box {
			background: #fff;
			// margin-top: 24rpx;
			padding: 0 24rpx;


		}

		.medic-boxs {
			margin-top: 0rpx;
			padding: 0rpx 24rpx 0 24rpx;
		}

		//医生
		.doctorCard {
			.card-item {
				margin-bottom: 24rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #E6E6E6;
			}
		}

		.pull {
			margin-top: 24rpx;
			background: #fff;
			padding: 24rpx 24rpx 24rpx 24rpx;
			// margin-top: 24rpx;
			// padding: 0 24rpx;
		}

		//科室
		.office-box {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;
			padding: 24rpx 22rpx;

			.office-item {

				.office-bg {
					// margin-bottom: 24rpx;
					width: 224rpx;
					height: 194rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					// background: #FFFFFF;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;

					// border: 2rpx solid #E6E6E6;
					image {
						width: 71rpx;
						height: 72rpx;
					}

					view {
						text-align: center;
						width: 200rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #4D4D4D;
					}
				}
			}
		}

		//综合
		.synthesis {

			.scroll-Y {
				height: calc(100vh - 335rpx);

				background: #fff;

				.box {
					background: #fff;
					padding: 24rpx;
					margin-top: 24rpx;

					.box-title {
						font-weight: bold;
						font-size: 32rpx;

					}

					.office {
						display: grid;
						grid-template-columns: repeat(4, 1fr);
						gap: 20rpx;
						padding-top: 24rpx;

						.office-bg {
							// margin-bottom: 24rpx;
							width: 160rpx;
							height: 144rpx;
							background-size: 100% 100%;
							background-repeat: no-repeat;
							// background: #FFFFFF;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							// border: 2rpx solid #E6E6E6;
							image {
								width: 56rpx;
								height: 56rpx;
								margin-bottom: 10rpx;
							}

							view {
								font-weight: 500;
								font-size: 24rpx;
								color: #4D4D4D;
							}
						}

						// padding: 24rpx 22rpx;
					}


					.more {
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 80rpx;
						line-height: 80rpx;
						background: #F5F3F0;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
				}
			}

			.scroll-height {
				background: #fff;
				height: calc(100vh - 447rpx);
			}
		}
	}

	.empty {
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sort-empty {


		height: calc(100vh - 335rpx);
	}

	.product-empty {
		height: calc(100vh - 447rpx);
	}

	.office-empty {
		height: calc(100vh - 335rpx);
	}

	.custom-tabs .u-tab-bar .u-tab-bar-item {
		margin-bottom: 0;
		/* 确保单个tab项没有额外的底部间距 */
	}

	.right-img {
		margin-left: 10rpx;
	}

	.product-top {
		margin-top: 24rpx;
	}

	.title-bot {
		margin-bottom: 24rpx;
	}

	.office-height {
		height: 24rpx;
		width: 100%;
		background-color: #F5F3F0;
	}
</style>